<template>
  <div class="page-box">
    <div class="search-box">
      <Row style="margin-bottom: 5px;">
        <Col span="6">
          <span class="color16">姓名</span>
        </Col>
        <Col span="6">
          <span class="color16">证件号码</span>
        </Col>
        <Col span="6">
          <span class="color16">事项类型</span>
        </Col>
      </Row>
      <Row style="margin-bottom: 15px;">
        <Col span="6">
          <Input v-model="searchInfo.name" placeholder="请输入姓名" style="width:calc(100% - 15px)" />
        </Col>
        <Col span="6">
          <Input v-model="searchInfo.card_no" placeholder="请输入证件号码" style="width:calc(100% - 15px)" />
        </Col>
        <Col span="6">
          <Select clearable style="width:calc(100% - 15px)" v-model="searchInfo.event_type" placeholder="请选择事项类型">
            <Option :value='1'>市内调动</Option>
            <Option :value="2">区内调动</Option>
            <Option :value="3">街道内调动</Option>
            <Option :value="4">跨区调动</Option>
            <Option :value="5">跨街道调动</Option>
            <Option :value="6">入职申请</Option>
            <Option :value="7">信息更新</Option>
  <!--          <Option :value="8">入职申请（其他人员）</Option>-->
            <Option :value="9">注销</Option>
          </Select>
        </Col>
      </Row>
      <Row style="margin-bottom: 5px;">
        <Col span="6">
          <span class="color16">调入区县</span>
        </Col>
        <Col span="6">
          <span class="color16">调入街道</span>
        </Col>
        <Col span="6">
          <span class="color16">调入社区</span>
        </Col>
      </Row>
      <Row>
        <Col span="6">
          <Select placeholder="请选择调入区县" clearable v-model="searchInfo.put_city_code" filterable transfer="" clearable @on-change="getMailList4(4,searchInfo.put_city_code)" style="width:calc(100% - 15px)">
            <Option :value="item.code" v-for="item in mailList5" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
        <Col span="6">
          <Select placeholder="请选择调入街道" clearable v-model="searchInfo.put_street_code" filterable transfer="" clearable @on-change="getMailList4(5, searchInfo.put_street_code)" style="width:calc(100% - 15px)">
            <Option :value="item.code" v-for="item in mailList6" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
        <Col span="6">
          <Select placeholder="请选择调入社区" clearable v-model="searchInfo.put_community_code" filterable transfer="" clearable style="width:calc(100% - 15px)">
            <Option :value="item.code" v-for="item in mailList7" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
        </Col>
      </Row>
      <Row type="flex" justify="left" style="margin-top: 30px;" >
        <Col>
          <Button class="new-btn-sty" @click="init()">搜索</Button>
          <!--        <Button v-if="this.$store.state.user.severUserInfo.company_grade === '5'" class="new-btn-sty" @click="add()"><Icon type="md-add" />添加成员</Button>-->
        </Col>
      </Row>
    </div>
    <Table v-if="!isNoData" border stripe :columns="columns" :data="data" style="border-radius: 5px;">
      <template slot-scope="{ row }" slot="type">
        <div v-for="item in labelList.typeList" :key="item.number">
          <span v-if="item.number === row.type">{{ item.type_name }}</span>
        </div>
      </template>
      <template slot-scope="{ row }" slot="event_type">
        <span v-if="row.event_type === '1'">市内调动</span>
        <span v-if="row.event_type === '2'">区内调动</span>
        <span v-if="row.event_type === '3'">街道内调动</span>
        <span v-if="row.event_type === '4'">跨区调动</span>
        <span v-if="row.event_type === '5'">跨街道调动</span>
        <span v-if="row.event_type === '6'">入职申请</span>
        <span v-if="row.event_type === '7'">信息更新</span>
<!--        <span v-if="row.event_type === '8'">入职申请（其他人员）</span>-->
        <span v-if="row.event_type === '9'">注销</span>
      </template>
      <template slot-scope="{ row }" slot="status">
        <span v-if="row.status === '1'">调动审批中</span>
        <span v-if="row.status === '2'">审批通过</span>
        <span v-if="row.status === '3'">审批驳回</span>
        <span v-if="row.status === '4'">入职审批中</span>
        <span v-if="row.status === '5'">信息更新中</span>
        <span v-if="row.status === '6'">注销审批中</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button style="background-color: unset;color: #B40001;border-width: 0px;padding-right: 8px;" size="small" type="info" @click="getPersonnel(row)">
          <img style="width: 14px;height: 14px;margin-right: 10px;margin-bottom: 2px;" src="../../../assets/images/V2-new-view/icon-table-xx.png" alt="" srcset="">
          <span>查看信息</span>
        </Button>
        <Button style="background-color: unset;color: #B40001;border-width: 0px;padding-right: 8px;" size="small" type="info" @click="getView(row)">
          <img style="width: 14px;height: 14px;margin-right: 10px;margin-bottom: 2px;" src="../../../assets/images/V2-new-view/icon-table-lc.png" alt="" srcset="">
          <span>查看流程</span>
        </Button>
        <Button v-if="row.status === '3'" style="background-color: unset;color: #FFAB04;border-width: 0px;" size="small" type="success" @click="getReason(row)">
          <img style="width: 14px;height: 14px;margin-right: 10px;margin-bottom: 2px;" src="../../../assets/images/V2-new-view/icon-table-bhyy.png" alt="" srcset="">
          <span>驳回原因</span>
        </Button>
      </template>
    </Table>
    <div v-if="isNoData" style="text-align: center;">
      <img style="width: 160px;height: 190px;margin: 20px;" src="@/assets/images/V2-new-view/icon-no-data.png" />
    </div>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Row type="flex" justify="center" class="page_style">
      <Page v-if="!isNoData" class-name="page-s-class" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size">
        <template>
          <span style="color: #C9C9C9;">共 <span style="color: #FFAB04">{{ totalnum }}</span> 条</span>
        </template>
      </Page>
    </Row>

    <Modal class="splc-modal" v-model="flowEdit" title="流程状态" @on-ok="OK111">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>流程状态</span>
      </p>
      <div>
        <!-- <Steps :current="item.index" direction="vertical" v-for="(item,index) in flowList" v-bind:key="item.index">
          <Step icon="ios-arrow-dropright" :title="item.operating_status" :content="item.approval_name"></Step>
        </Steps> -->
        <div class="splc-item" v-for="(item,index) in flowList" v-bind:key="item.index">
          <img v-if="item.state === '0'" src="../../../assets/images/V2-new-view/icon-sp-fq.png" alt="" srcset="">
          <img v-else-if="item.state === '1'" src="../../../assets/images/V2-new-view/icon-sp-ysp.png" alt="" srcset="">
          <img v-else-if="item.state === '2' || item.state === '3'" src="../../../assets/images/V2-new-view/icon-sp-wsp.png" alt="" srcset="">
          <div class="splc-spnr">
            <div class="sp-time">{{item.operating_status}}</div>
            <div class="sp-jigou">{{item.approval_name}}</div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="OK111">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="flowEdit = false">取 消</i-button>
      </div>
    </Modal>

    <Modal
      v-model="showCityModal"
      class="view-model"
      title="查看" width="1000px">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>查看</span>
      </p>
      <div style="width: 100%;">
        <Form :label-width="155" label-position="right">
          <Row :gutter="15">
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>唯一识别编号<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI001" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>身份证号<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI002" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>姓名<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI003" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>出生日期<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI004" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>性别<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI005" filterable transfer="" style="width: 100%;">
                  <Option :value="'0'">男</Option>
                  <Option :value="'1'">女</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>婚姻状况<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI006" filterable transfer="" style="width: 100%;">
                  <Option :value="item.TYPECODE" v-for="item in dictList[3]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>民族<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI007" filterable transfer="" style="width: 100%;">
                  <Option :value="item.TYPECODE" v-for="item in dictList[4]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>政治面貌<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI008" filterable transfer="" style="width: 100%;">
                  <Option :value="item.TYPECODE" v-for="item in dictList[0]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>是否退役士兵定向<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI009" filterable transfer="" style="width:100%;">
                  <Option :value="'Y'">是</Option>
                  <Option :value="'N'">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>是否军嫂定向<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI010" filterable transfer="" style="width:100%;">
                  <Option :value="'Y'">是</Option>
                  <Option :value="'N'">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div style="display: flex;align-items: center;justify-content: end">
                    <div style="width:100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">是否为低保或低保边缘户子女
                    </div>
                    <span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI011" filterable transfer="" style="width: 100%;">
                  <Option :value="'Y'">是</Option>
                  <Option :value="'N'">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>户籍地址<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI012" type="text" style="width:100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>联系方式<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI013" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>家庭住址<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI014" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>免冠照片<span style="color: red">(必填)</span></div>
                </template>
                <div v-for="(item, index) in fileUrlList" :key="index">
                  <img :src="item" :title="item" width="85px" height="100px"
                       style="color: #457eca; font-size: 14px;border-radius: 5px;"></img>
                </div>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>身份证正反上传<span style="color: red">(必填)</span></div>
                </template>
                <div v-for="(item, index) in fileUrlList2" :key="index" style="float: left; margin-right: 10px">
                  <img :src="item" :title="item" width="148px" height="105px"
                       style="color: #457eca; font-size: 14px;border-radius: 5px;"></img>
                </div>
                <div v-for="(item, index) in fileUrlList3" :key="index + '0'" style="float: left">
                  <img :src="item" :title="item" width="148px" height="105px"
                       style="color: #457eca; font-size: 14px;border-radius: 5px;"></img>
                </div>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <!--        <Row class="bench_search">-->
        <!--          <Col span="5" align="center">在职状态</Col>-->
        <!--          <Col span="6" >-->
        <!--            <Select disabled v-model="showinfo.CPBI017" filterable transfer="" style="width: 52.5%;">-->
        <!--              <Option :value="item.TYPECODE" v-for="item in dictList[5]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--          <Col span="4" align="center">审批状态</Col>-->
        <!--          <Col span="9" >-->
        <!--            <Select disabled v-model="showinfo.CPBI018" filterable transfer="" style="width: 35%;">-->
        <!--              <Option :value="item.TYPECODE" v-for="item in dictList[6]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--        </Row>-->
        <!--        <Row class="bench_search" >-->
        <!--          <Col span="5" align="center" >银行卡号<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="6">-->
        <!--            <Input disabled v-model="showinfo.bankcardno" type="text" style="width: 52.5%"></Input>-->
        <!--          </Col>-->
        <!--          <Col span="4" align="center" >应发工资<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="9">-->
        <!--            <Input disabled v-model="showinfo.salary" type="text" style="width: 35%"></Input>-->
        <!--          </Col>-->
        <!--        </Row>-->
        <!--        &lt;!&ndash;是否兼职、是否兼职收入  &ndash;&gt;-->
        <!--        <Row class="bench_search" >-->
        <!--          <Col span="5" align="center" >是否兼职<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="6">-->
        <!--            <Select disabled v-model="showinfo.part_time_job" filterable transfer="" style="width: 52.5%;">-->
        <!--              <Option :value="'1'">是</Option>-->
        <!--              <Option :value="'0'">否</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--          <Col span="4" align="center" >是否兼职收入<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="9">-->
        <!--            <Select disabled v-model="showinfo.part_time_income" filterable transfer="" style="width: 35%;">-->
        <!--              <Option :value="'1'">是</Option>-->
        <!--              <Option :value="'0'">否</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--        </Row>-->
      </div>

      <div class="tabs">
        <div class="mk-active" v-show="active===0"></div>
        <div class="mk" v-show="active!==0"></div>
        <div class="tabsList">
          <div :class="active===index?'active':'tabsTab'"
               v-for="(item,index) in tabsList"
               :key="index"
               @click="tabs(index)">
            <div class="lang" v-if="index!==0"></div>
            <div class="name"
                 :style="index===0?'margin-left: 0;border-left: 0;padding-left: 0;':(active===index?'padding-left: 0;':'')">
              <img class="img"
                   :src="active===index?item.active_img:item.tab_img"
                   alt=""/>
              <div class="text2">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <transition v-if="active===0" :name="loading?transition:''">
          <Form :label-width="100" label-position="right">
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>毕业院校<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPEI002" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>所学专业<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPEI003" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>最高学历<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPEI004" filterable transfer="" style="width:100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>学位<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPEI005" filterable transfer="" style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[8]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>毕业时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPEI006" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </transition>
        <transition v-if="active===1" :name="loading?transition:''">
          <Row>
            <Col span="24">
              <Table
                :no-data-text="`<div style='text-align: center;'><img style='width: 160px;height: 190px;margin: 20px;' src='${require('@/assets/images/V2-new-view/icon-no-data.png')}' /></div>`"
                border :columns="familyInfoTable" :data="familyInfoList" ref="familySelection2"
                @on-selection-change="familySelection()" style="margin-top: 10px">
                <template slot-scope="{ row }" slot="CPFI002">
                  <Input disabled v-model="row.CPFI002" type="text"></Input>
                </template>
                <template slot-scope="{ row }" slot="CPFI003">
                  <Select disabled v-model="row.CPFI003" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[9]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row }" slot="CPFI004">
                  <Input disabled v-model="row.CPFI004" type="text"></Input>
                </template>
                <template slot-scope="{ row }" slot="CPFI005">
                  <Input disabled v-model="row.CPFI005" type="text"></Input>
                </template>
                <template slot-scope="{ row }" slot="CPFI006">
                  <Select disabled v-model="row.CPFI006" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[0]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row, index }" slot="action1">
                  <Button disabled type="primary" @click="confirm(row, index)">确认</Button>
                </template>
              </Table>
            </Col>
          </Row>
        </transition>
        <transition v-if="active===2" :name="loading?transition:''">
          <Form :label-width="140" label-position="right">
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>社会工作师资格</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI002" filterable transfer="" style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[10]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>工作师资格取得时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI003" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>所属市区<span style="color: red">(必填)</span></div>
                  </template>
                  <Select v-model="showinfo.CPWI023" disabled filterable transfer="" clearable
                          @on-change="getMailList2(4,showinfo.CPWI023)" style="width: 100%;">
                    <Option :value="item.code" v-for="item in mailList1" v-bind:key="item.code">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>街道</div>
                  </template>
                  <Select v-model="showinfo.CPWI024" disabled filterable transfer="" clearable
                          @on-change="getMailList2(5, showinfo.CPWI024)" style="width: 100%;">
                    <Option :value="item.code" v-for="item in mailList2" v-bind:key="item.code">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>社区<span style="color: red">(必填)</span></div>
                  </template>
                  <Select v-model="showinfo.CPWI025" disabled filterable transfer="" clearable style="width: 100%;">
                    <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>入职时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI001" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>任职情况<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI006" filterable style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[1]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>任职时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI007" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>党组织成员<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI011" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否居委会成员</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI012" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>笔试成绩<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI008" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>面试成绩<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI009" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>其他职业资格</div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI004" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>继续教育情况</div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI015" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否取得全科社工资格</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI016" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>全科社工资格取得时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI005" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="24" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>社会保险缴费记录<span style="color: red">(必填)</span></div>
                  </template>
                  <CheckboxGroup disabled v-model="showinfo.CPWI017">
                    <Checkbox label="01">养老保险</Checkbox>
                    <Checkbox label="02">医疗保险</Checkbox>
                    <Checkbox label="03">失业保险</Checkbox>
                    <Checkbox label="04">工伤保险</Checkbox>
                    <Checkbox label="05">生育保险</Checkbox>
                    <Checkbox label="06">住房公积金</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>初次缴纳时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI018" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否有财政负担保险</div>
                  </template>
                  <Select disabled v-model="showinfo.financial_burden" filterable transfer="" style="width: 100%;">
                    <Option :value="'1'">是</Option>
                    <Option :value="'0'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>其他财政负担保险<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.other_financial_burden" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否连续缴纳<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI019" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>接续缴纳时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI020" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>培训记录</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI014" filterable transfer="" style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[11]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>综合评定</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI013" filterable transfer="" style="width: 100%;">
                    <Option :value="'10'">优秀</Option>
                    <Option :value="'20'">称职</Option>
                    <Option :value="'40'">不称职</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>离职时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI021" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="24" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>人员类型</div>
                  </template>
                  <CheckboxGroup disabled v-model="showinfo.personnel_type">
                    <Checkbox label="1">村(社区)党组织成员</Checkbox>
                    <Checkbox label="2">村(居)委员会成员</Checkbox>
                    <Checkbox label="3">村(社区)专职人员</Checkbox>
                    <Checkbox label="4">乡镇(街道)派驻人员</Checkbox>
                    <Checkbox label="5">社区网格员</Checkbox>
                    <Checkbox label="6">社区公益岗位</Checkbox>
                    <Checkbox label="7">村(居)务监督委员会成员</Checkbox>
                    <Checkbox label="8">村(居)民小组长</Checkbox>
                    <Checkbox label="9">其他人员</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否返聘</div>
                  </template>
                  <Select disabled v-model="showinfo.back" filterable transfer="" style="width: 100%;">
                    <Option :value="'1'">是</Option>
                    <Option :value="'0'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>返聘原因</div>
                  </template>
                  <Input disabled v-model="showinfo.back_cause" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </transition>
        <transition v-if="active===3" :name="loading?transition:''">
          <div>
            <Col span="24">
              <Table border
                     :no-data-text="`<div style='text-align: center;'><img style='width: 160px;height: 190px;margin: 20px;' src='${require('@/assets/images/V2-new-view/icon-no-data.png')}' /></div>`"
                     :columns="assessmentInfoTable" :data="assessmentInfoList"
                     ref="assessmentSelection2" @on-selection-change="assessmentSelection()" style="margin-top: 10px;">
                <template slot-scope="{ row }" slot="CPKI001">
                  <Select disabled v-model="row.CPKI001" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[12]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row }" slot="CPKI002">
                  <DatePicker disabled type="date" v-model="row.CPKI002" :transfer="true"></DatePicker>
                </template>
                <template slot-scope="{ row }" slot="CPKI003">
                  <Select disabled v-model="row.CPKI003" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[13]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row, index }" slot="action1">
                  <Button disabled type="primary" @click="confirm2(row, index)">确认</Button>
                </template>
              </Table>
            </Col>
          </div>
        </transition>
        <transition v-if="active===4" :name="loading?transition:''">
          <Form :label-width="100" label-position="right">
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="劳动合同">
                  <Select disabled v-model="showinfo.labor_contract" filterable transfer="" style="width: 100%">
                    <Option :value="'0'">否</Option>
                    <Option :value="'1'">是</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="劳动合同甲方">
                  <Input disabled v-model="showinfo.first_party" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="其他甲方">
                  <Input disabled v-model="showinfo.other_first_party" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="劳动关系证明">
                  <Input disabled v-model="showinfo.prove" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="其他证明">
                  <Input disabled v-model="showinfo.prove" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </transition>
      </div>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="showCityModal = false">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="showCityModal = false">取 消</i-button>
      </div>
    </Modal>


    <Modal
      v-model="errorModal" title="驳回原因"
      @on-ok="errorModal = false"
      ok-text="确定"
      cancel-text="取消"
      @on-cancel="errorModal = false">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>驳回原因</span>
      </p>
      <p style="text-align: center; font-size: 24px">驳回原因：{{message}}</p>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="errorModal = false">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="errorModal = false">取 消</i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { findMyLaunchList, getPersonInfo, getPersonnel, findPersonnelTypeList, getOffice, getTypeNameList } from '@/api/eventlist'
import { findMyInitiateList, findFlowList } from '@/api/worker.js'
import { getTypeList } from '@/api/personInfo.js'
export default {
  // components: {Export},
  data () {
    return {
      tab_index: 0,
      transition: '',
      active: 0,
      tabsList: [
        {
          name: '教育信息',
          id: 0,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab0.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active0.png')
        },
        {
          name: '亲属信息',
          id: 1,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab1.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active1.png')
        },
        {
          name: '职业信息',
          id: 2,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab2.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active2.png')
        },
        {
          name: '考核信息',
          id: 3,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab3.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active3.png')
        },
        {
          name: '劳动合同',
          id: 4,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab4.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active4.png')
        },
      ],
      labelList: { typeList: [] },
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      message: '',
      errorModal: false,
      loadData: true,
      flowEdit: false,
      searchInfo: {},
      flowList: [],
      data: [],
      columns: [
        { title: '序号', type: 'index', width: 80, align: 'center' },
        { title: '姓名', key: 'CPBI003', width: 100, align: 'center' },
        { title: '身份证号', key: 'card_no', width: 180, align: 'center' },
        // { title: '人员类型', slot: 'type', width: 200, align: 'center' },
        { title: '事项类型', slot: 'event_type', width: 200, align: 'center' },
        { title: '状态', slot: 'status', width: 200, align: 'center' },
        { title: '发起机构', key: 'out_community_name', width: 250, align: 'center' },
        { title: '调入机构', key: 'put_community_name', width: 250, align: 'center' },
        { title: '操作', slot: 'action', align: 'center', minWidth: 300, fixed: 'right' }
      ],
      fileUrlList: [],
      fileUrlList2: [],
      fileUrlList3: [],
      familyInfoList: [],
      assessmentInfoList: [],
      sessionInfoList: [],
      typeList: [],
      judge: false,
      judge2: false,
      judge3: false,
      mailList1: [],
      mailList2: [],
      mailList3: [],
      mailList5: [],
      mailList6: [],
      mailList7: [],
      showCityModal: false,
      isNoData: false,
      addinfo: {},
      showinfo: {},
      dictList: [[], [], []],
      familyInfoTable: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '亲属姓名(必填)', slot: 'CPFI002', minWidth: 90, align: 'center' },
        { title: '亲属关系(必填)', slot: 'CPFI003', minWidth: 90, align: 'center' },
        { title: '亲属联系方式(必填)', slot: 'CPFI004', minWidth: 90, align: 'center' },
        { title: '工作单位(必填)', slot: 'CPFI005', minWidth: 90, align: 'center' },
        { title: '政治面貌(必填)', slot: 'CPFI006', minWidth: 90, align: 'center' },
        { title: '操作', slot: 'action1', minWidth: 90, align: 'center' }
      ],
      assessmentInfoTable: [
        {
          title: '序号',
          type: 'index',
          slot: 'id',
          width: 80,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '考核类型', slot: 'CPKI001', minWidth: 90, align: 'center' },
        { title: '考核时间', slot: 'CPKI002', minWidth: 90, align: 'center' },
        { title: '考核成绩', slot: 'CPKI003', minWidth: 90, align: 'center' },
        { title: '操作', slot: 'action1', minWidth: 90, align: 'center' }
      ]
    }
  },
  methods: {
    tabs (index) {
      this.loading = true
      this.transition = index > this.index ? 'move-right' : 'move-left'// 显示动画逻辑
      this.index = index
      this.active = index
    },
    init () {
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        card_no: this.searchInfo.card_no,
        name: this.searchInfo.name,
        put_city_code: this.searchInfo.put_city_code,
        put_street_code: this.searchInfo.put_street_code,
        put_community_code: this.searchInfo.put_community_code,
        event_type: this.searchInfo.event_type
      }
      findMyLaunchList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.isNoData = res.data.data.totalRecord <= 0
          this.loadData = false
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
          this.loadData = false
        }
      })
    },
    getReason (item) {
      this.errorModal = true
      this.message = item.reason
    },
    getView (item) {
      findFlowList(item).then(res => {
        if (res.data.errcode === 0) {
          this.flowEdit = true
          this.flowList = res.data.data
          this.flowList.forEach(function (temp, index) {
            temp.state = temp.operating_status
            if (temp.operating_status === '0') {
              temp.operating_status = '发起:操作时间-' + temp.create_time
            } else if (temp.operating_status === '1') {
              if (temp.result === '1') {
                temp.operating_status = '已审批---通过:操作时间-' + temp.update_time
              } else if (temp.result === '2') {
                temp.operating_status = '已审批---驳回:操作时间-' + temp.update_time
              }
            } else if (temp.operating_status === '2') {
              temp.operating_status = '待审批'
            } else if (temp.operating_status === '3') {
              temp.operating_status = '未审批'
            }
            temp.approval_name = '操作机构：' + temp.approval_name
            if (temp.result != '' && temp.result != null) {
              temp.num = index + 2
              console.log(temp.num)
            }
            // this.flowList.push(temp)
          })
          console.log(this.flowList)
        } else {
          this.$Notice.error({ title: '获取流程失败', desc: res.data.errmsg })
        }
      })
    },
    OK111() {
      this.flowEdit = false
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    getPersonnel (item) {
      this.fileUrlList = []
      this.fileUrlList2 = []
      this.fileUrlList3 = []
      this.addinfo = {}
      this.showinfo = {}
      if (item.event_type === 8) {
        this.getPersonnelCity(item.card_no)
      } else {
        getPersonInfo({ id: item.ID }).then(res => {
          if (res.data.errcode === 0) {
            this.showinfo = res.data.data
            this.showCityModal = true
            if (res.data.data.CPBI015) {
              this.judge = true
              // this.updateinfo.files = res.data.data.CPBI015
              this.fileUrlList.push(res.data.data.CPBI015)
            } else {
              this.judge = false
            }
            if (res.data.data.CPBI016) {
              this.judge2 = true
              // this.updateinfo.files2 = res.data.data.CPBI016
              this.fileUrlList2.push(res.data.data.CPBI016)
            } else {
              this.judge2 = false
            }
            if (res.data.data.CPBI019) {
              this.judge3 = true
              // this.updateinfo.files3 = res.data.data.CPBI019
              this.fileUrlList3.push(res.data.data.CPBI019)
            } else {
              this.judge3 = false
            }
            // if (this.companyGrade === '2') {
            this.getMailList(2, null)
            this.getMailList2(4,this.showinfo.CPWI023)
            this.showinfo.CPWI024 = res.data.data.CPWI024
            this.getMailList2(5,this.showinfo.CPWI024)
            // }
            // this.fileUrlList.push(res.data.data.CPBI015)
            // this.fileUrlList2.push(res.data.data.CPBI016)
            // this.fileUrlList3.push(res.data.data.CPBI019)
            this.index1 = this.fileUrlList.length - 1
            this.index2 = this.fileUrlList2.length - 1
            this.index3 = this.fileUrlList3.length - 1

            if (res.data.data.CPWI017 !== undefined) {
              this.showinfo.CPWI017 = res.data.data.CPWI017.toString().split(',')
            }
            if (res.data.data.personnel_type !== undefined) {
              this.showinfo.personnel_type = res.data.data.personnel_type.toString().split(',')
            }
            this.familyInfoList = res.data.data.familyInfoList
            this.assessmentInfoList = res.data.data.assessmentInfoList
            this.sessionInfoList = res.data.data.sessionInfoList
          } else {
            this.$Notice.error({
              title: '获取人员信息失败',
              desc: res.data.errmsg
            })
          }
        })
      }
    },
    getPersonnelCity (card_no) {
      this.addinfo = {}
      getPersonnel({CPBI002: card_no}).then(res => {
        if (res.data.errcode === 0) {
          this.showCityModal = true
          this.addinfo = res.data.data
          if (res.data.data.personnel_type !== undefined) {
            this.addinfo.personnel_type = res.data.data.personnel_type.toString().split(',')
          }
          if (res.data.data.CPBI015) {
            this.judge = true
            this.addinfo.files = res.data.data.CPBI015
            this.fileUrlList.push(res.data.data.CPBI015)
          }
          if (res.data.data.CPBI016) {
            this.judge2 = true
            this.addinfo.files2 =
              this.fileUrlList2.push(res.data.data.CPBI016)
          }
          if (res.data.data.CPBI019) {
            this.judge3 = true
            this.addinfo.files3 = res.data.data.CPBI019
            this.fileUrlList3.push(res.data.data.CPBI019)
          }
        } else {
          this.$Notice.error({
            title: '获取人员信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getMailList (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList1 = res.data.data
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList2 (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList2 = res.data.data
          } else if (grade === 5) {
            this.mailList3 = res.data.data
          }
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList3 (grade, code) {
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList5 = res.data.data
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList4 (grade, code) {
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList6 = res.data.data
          } else if (grade === 5) {
            this.mailList7 = res.data.data
          }
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    findPersonnelTypeList () {
      findPersonnelTypeList().then(res => {
        if (res.data.errcode === 0) {
          this.typeList = res.data.data
        } else {
          this.$Notice.error({
            title: '获取人员状态失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getTypeName (id, index) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList[index] = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getDictList () {
      this.getTypeName('political', 0)
      this.getTypeName('position', 1)
      this.getTypeName('cpbi018', 2)
      this.getTypeName('marriage', 3)
      this.getTypeName('nation', 4)
      this.getTypeName('incumbency', 5)
      this.getTypeName('sp_status', 6)
      this.getTypeName('degree', 7)
      this.getTypeName('academic', 8)
      this.getTypeName('lineal', 9)
      this.getTypeName('pqoswt', 10)
      this.getTypeName('train', 11)
      this.getTypeName('examType', 12)
      this.getTypeName('examresult', 13)
      this.getTypeName('cpCancel', 14)
    },
    getTypeList () {
      let param1 = { // 人员类型
        pid: '10001'
      }
      getTypeList(param1).then(res => {
        if (res.data.errcode === 0) {
          this.labelList.typeList = res.data.data
          return
        }
        this.$Notice.error({ title: '查询失败' })
      })
    }
  },
  mounted() {
    this.init()
    this.getTypeList()
    // this.getDictList()
    this.findPersonnelTypeList()
    this.getMailList(2, null)
    this.getMailList3(2, null)
  }
}
</script>
<style scoped>
.search-info-style {
  margin: 0;
}
.bench_search {
  margin-bottom: 10px;
}

.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #B40001;
  border-color: #B40001;
  font-weight: 500;
  font-size: 12px;
  width: 64px;
}
.page-box{
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
}
.search-box{
  background-color: #F8F8F8;
  border-radius: 5px;
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.page_style {
  margin-top: 30px;
}
.page-s-class /deep/ .ivu-page-item-active{
  border-color: #FFAB04;
  background-color: #FFFAE8;
}
.page-s-class /deep/ .ivu-page-item-active a{
  color: #FFAB04;
}
.icon-search{
  position: absolute;
  top: 8px;
  right: 25px;
  width: 16px;
  height: 16px;
  z-index: 1;
}
/deep/ .ivu-table-fixed-header thead tr th, /deep/ .ivu-table-header thead tr th{
  font-size: 14px;
  font-weight: bold;
  color: #161616;
  background-color: #EFEFEF;
  border-color: #C9C9C9;
  height: 40px;
}
.view-model /deep/ .ivu-table-fixed-header thead tr th, .view-model /deep/ .ivu-table-header thead tr th{
  font-size: 14px;
  font-weight: bold;
  color: #161616;
  background-color: #EFEFEF;
  border-color: #C9C9C9;
  height: 40px;
  line-height: 1;
}
.view-model /deep/ .ivu-table td{
  height: 40px;
  color: #161616;
  border-color: #C9C9C9;
  line-height: 1;
}
/deep/ .ivu-table td{
  height: 40px;
  color: #161616;
  border-color: #C9C9C9;
}
/deep/ .ivu-input{
  padding-right: 30px;
}
/deep/ .ivu-page-item{
  background-color: #F8F8F8;
  border-radius: 5px;
  border-color: #F8F8F8;
}
/deep/ .ivu-page-prev, /deep/ .ivu-page-next{
  background-color: #F8F8F8;
  border-radius: 5px;
  border-color: #F8F8F8;
}
.search-box /deep/ .ivu-icon-ios-arrow-down:before{
  background-color: #C9C9C9;
  color: #131313;
  font-size: 16px;
  border-radius: 2px;
}
.color16{
  color: #161616;
}
/deep/ .ivu-modal-header, /deep/ .ivu-modal-footer{
  border-bottom: 0;
  border-top: 0;
}
/deep/ .ivu-modal-header{
  padding: 30px 30px 20px;
  height: 70px;
}
/deep/ .ivu-modal-footer{
  padding: 0px 30px 30px;
}
/deep/ .ivu-modal-body{
  padding: 0px 30px 56px;
}
/deep/ .ivu-modal-close {
  font-size: 20px;
  right: 30px;
  top: 30px;
}
/deep/ .ivu-modal-close .ivu-icon-ios-close {
  font-size: 20px;
  color:black;
  background-color: #f6f4f4;
  border-radius:50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  top: -3px;
}
/deep/ .ivu-modal-content{
  border-radius: 10px;
}
.splc-item{
  width: 100%;
  height: 65px;
  background-color: #F8F8F8;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 14px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
.splc-item img{
  width: 37px;
  height: 37px;
  vertical-align: middle;
  margin-right: 10px;
}
.splc-spnr{
  width: calc(100% - 47px);
}
.sp-time{
  width: 100%;
  font-size: 14px;
  color: #161616;
}
.sp-jigou{
  width: 100%;
  font-size: 12px;
  color: #C9C9C9;
}
.splc-modal .splc-item:last-child{
  margin-bottom: 0;
}


.tabsTab {
    height: 40px;

  }
  .tabsTab .name {
    background: #efefef;
    border: 1px solid #fff;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(30deg);
    height: 100%;
  }


  .tabsTab .name .text2 {
    transform: skew(-30deg);
    text-align: center;
  }

  .tabsTab .name .img {
    margin-right: 10px;
    transform: skew(-30deg);
    width: 14px;
    height: 14px;
  }


  .active {
    height: 50px;
    display: flex;
    align-items: center;
  }

  .active .lang {
    height: 100%;
    background: #F8F8F8;
    width: 58px;
    margin-left: -20px;
    transform: skew(-30deg);
  }

  .active .name {
    margin-left: -30px;
    height: 100%;
    background: #F8F8F8;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(30deg);

  }

  .active .name .text2 {
    transform: skew(-30deg);
    text-align: center;
  }

  .active .name .img {
    margin-right: 10px;
    transform: skew(-30deg);
    width: 14px;
    height: 14px;
  }

  .tabs {
    height: 50px;
    position: relative;
  }

  .mk {
    position: absolute;
    height: 40px;
    width: 30px;
    top: 10px;
    background: #efefef;
    border: 1px solid #fff;
    left: 0;
    z-index: 0;
  }


  .mk-active {
    position: absolute;
    height: 50px;
    width: 30px;
    background: #f8f8f8;
    left: 0;
    z-index: 0;
    border-radius: 5px 0 0 0;
  }

  .tabsList {
    left: 15px;
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-end;
  }

  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .ivu-card-body {
      padding: 0px;
    }
  }
  .container {
    overflow-x: hidden;
    height: 240px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 10px;
    border-radius: 0 5px 5px 5px;
    background: #f8f8f8;
    border: 1px solid #f8f8f8;
  }
</style>
